import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { NavBar, PullToRefresh } from 'antd-mobile';
import { bindActionCreators } from 'redux';
import { goBack, redirect } from '../redux/actions/global';
import { connect } from 'react-redux';
import Loading from '../components/Loading/Loading';

class Demo5 extends Component {
  state = {
    loading: false,
    refreshing: false,
    height: document.documentElement.clientHeight,
    data: []
  }
  componentDidMount(){
    // 给容器赋值
    if (this.ptr) {
      // 添加滚动事件
      ReactDOM.findDOMNode(this.ptr).addEventListener('scroll', this.onScrollHandle.bind(this));
      // 容器高度
      const height = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop - 45;
      setTimeout(() => {
        this.setState({
          height: height,
        })
        this.getListData();
      },0);
    }
  }
  componentWillUnmount() {
    if (this.ptr) {
      ReactDOM.findDOMNode(this.ptr).removeEventListener('scroll', this.onScrollHandle.bind(this));
    }
  }
  // 加载列表数据
  getListData = () => {
    const dataArr = [];
    for (let i = 0; i < 20; i++) {
      dataArr.push(i);
    }
    this.setState({
      data: dataArr.concat(this.state.data)
    })
  }
  // 监听滚动
  onScrollHandle = (event) => {
    const clientHeight = event.target.clientHeight;
    const scrollHeight = event.target.scrollHeight;
    const scrollTop = event.target.scrollTop;
    const isBottom = (clientHeight + scrollTop === scrollHeight);
    // 滑到页面底部
    if(isBottom){
      this.getListData();
    }
  }
  // 页面刷新
  onRefresh = () => {
    this.setState({ refreshing: true });
    setTimeout(() => {
      this.setState({ refreshing: false });
    }, 1000);
  }
  render() {
    const { goBack, redirect } = this.props;
    return (
      <div className="page">
        <NavBar
          leftContent={[
            <span key='1' className="iconfont icon-left"></span>
          ]}
          onLeftClick={goBack}
          rightContent={[
            <span key='1' className="iconfont icon-fenxiang"></span>
          ]}
        >Demo5</NavBar>
        <div className="content demo5">
          <PullToRefresh
            damping={80}
            ref={el => this.ptr = el}
            style={{
              height: this.state.height,
              overflow: 'auto',
            }}
            refreshing={this.state.refreshing}
            onRefresh={this.onRefresh}
          >
            {this.state.data.map((data, index) => (
              <div key={index} style={{ textAlign: 'center', padding: 20 }} onClick={redirect.bind(this, '/demo6/1/2')}>
                {this.state.down ? 'pull down' : 'pull up'} {index}
              </div>
            ))}
          </PullToRefresh>
          <Loading loading={this.state.loading}/>
        </div>
      </div>
    );
  }
}


const mapStateToProps = (state) => {
  return {
    lists: state.lists,
  }
}
// redux 绑定dispath
const mapDispatchToProps = (dispatch) => {
  return {
    redirect: bindActionCreators(redirect, dispatch),
    goBack: bindActionCreators(goBack, dispatch),
  }
}

Demo5 = connect(mapStateToProps, mapDispatchToProps)(Demo5)

export default Demo5;
